<template>
<el-row class="addTerminal">
  <breadcrumb class="breadcrumb-container"></breadcrumb>
  <el-row class="clearfix">
    <el-col :span="6">
      <el-form :model="Form" size="small" label-width="100px" :rules="rules" ref="form">
        <el-form-item label="所属门店：">
          <span>{{ Form.store_name }}</span>
        </el-form-item>
        <el-form-item label="终端类别：" prop="category">
          <el-select v-model="Form.category" @change="handleChangeTerminalName">
            <el-option v-for="item in category" :key="item.category" :value="item.category" :label="item.category_name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终端名称：" prop="name">
          <el-select v-model="Form.name">
            <el-option v-for="item in device" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终端SN码：" prop="sn">
          <el-input v-model="Form.sn"></el-input>
        </el-form-item>
        <el-form-item label="客户云密码：" v-if="Form.category === 2">
          <el-input v-model="Form.device_pwd"></el-input>
        </el-form-item>
        <el-form-item label="终端备注：">
          <el-input style="font-size:12px;" type="textarea" autosize :rows="3" v-model="Form.remarks"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="small" class="fr mt-10" @click="handleClickSubmit">确定绑定</el-button>
    </el-col>
  </el-row>
</el-row>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { TerminalBindInit, TerminalBindSearch, TerminalBindSubmit } from '@/api/shop'

export default {
  name: 'addTerminal',
  components: {
    Breadcrumb
  },
  data() {
    return {
      rules: {
        sn: [{ required: true, trigger: 'blur', message: '必须填写哦' }],
        number: [{ required: true, trigger: 'blur', message: '必须填写哦' }],
        password: [{ required: true, trigger: 'blur', message: '必须填写哦' }],
        name: [{ required: true, trigger: 'change', message: '必须选择哦' }],
        category: [{ required: true, trigger: 'change', message: '必须选择哦' }]
      },
      Form: {
        sn: '',
        store_name: '',
        category: '',
        name: '',
        remarks: '',
        device_pwd: ''
      },
      category: [],
      device: []
    }
  },
  methods: {
    handleBindInit() {
      TerminalBindInit(this.$route.query.store_id).then(res => {
        if (res.data.errorCode === 0) {
          this.category = res.data.result.category
          this.Form.store_name = res.data.result.store_name
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleChangeTerminalName(v) {
      TerminalBindSearch(v).then(res => {
        if (res.data.errorCode === 0) {
          this.Form.name = ''
          this.device = res.data.result.device
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          TerminalBindSubmit(this.$route.query.store_id, this.Form).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.$router.go(-1)
            } else {
              this.$message.error(res.data.errorMsg)
            }
          })
        }
      })
    }
  },
  created() {
    this.handleBindInit()
  }
}
</script>

<style lang="scss" scoped>
  .addTerminal {
    span {
      font-size: 12px;
    }
  }
</style>

